<template>
    <div class="app">
        <div class="header">
            <el-button type="danger" :icon="Delete" size="large" @click="handleMoreDel" :disabled="state.deleteMore == 0">批量删除</el-button>
            <el-button type="primary" :icon="Plus" size="large" @click="handleAddUser">添加试题</el-button>
            <el-input v-model="input" placeholder="请输入你想搜索的内容" size="large" style="width: 300px; margin-left: 12px" />
            <el-select v-model="selectors" class="m-2" placeholder="请选择你要查找的类型" size="large" style="margin-left: 12px" clearable>
                <div class="inputs">
                    <el-input v-model="inputType" placeholder="请输入要添加的题型" style="width: 150px" />
                    <el-button type="success" style="margin-left: 5px" @click="handleType">添加</el-button>
                </div>
                <el-option
                    v-for="item in state.questType"
                    :key="item.id"
                    :label="item.typename"
                    :value="item.typename">
                </el-option> 
            </el-select>
        </div>


        <!-- 表格 -->
        <div>
            <el-table :data="inp.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%" @selection-change="handleSelectionChange" class="tables">
                <el-table-column type="selection" width="55"  />
                <el-table-column type="expand">
                    <template #default="scope">
                        <div m="4" class="table_inner">
                            <span>答案:</span>
                            <p m="t-0 b-2" class="da">{{scope.row.answer}}</p>
                        </div> 
                    </template>
                </el-table-column>
                <el-table-column label="题名" prop="title" />
                <el-table-column label="内容" prop="content" width="250px" />
                <el-table-column label="题型" prop="types__typename" width="150px" />
                <el-table-column label="操作" width="200px">
                    <template #default="scope">
                        <el-button size="small" type="success" @click="handleEdit(scope.row)">修改</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="demo-pagination-block">
                <el-pagination
                    v-model:page-size="pageSize"
                    v-model:currentPage="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="inp.length"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>

        </div>

        <!-- 添加试题的对话框 -->
        <div>
            <el-dialog v-model="dialogFormVisible" title="添加试题">
                <el-form :model="state.form" ref="questRef" :rules="rules">
                    <el-form-item label="题名" :label-width="formLabelWidth" prop="title">
                        <el-input v-model="state.form.title" />
                    </el-form-item>
                    <el-form-item label="内容" :label-width="formLabelWidth" prop="content">
                        <el-input v-model="state.form.content" />
                    </el-form-item>
                    
                    <el-form-item label="题型" :label-width="formLabelWidth" prop="types__id">
                        <el-select v-model="state.form.types__id" class="m-2" placeholder="请选择题型">
                            <el-option
                            v-for="item in state.questType"
                            :key="item.id"
                            :label="item.typename"
                            :value="item.id"
                            />
                           
                        </el-select>
                    </el-form-item>
                    <el-form-item label="答案" :label-width="formLabelWidth" prop="answer">
                        <el-input v-model="state.form.answer" type="textarea" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="handleAddQuest">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>

        <!-- 修改试题的对话框 -->
        <div>
            <el-dialog v-model="dialogFormVisible2" title="修改试题">
                <el-form :model="state.editForm" ref="questRef" :rules="rules">
                    <el-form-item label="题名" :label-width="formLabelWidth" prop="title">
                        <el-input v-model="state.editForm.title" />
                    </el-form-item>
                    <el-form-item label="内容" :label-width="formLabelWidth" prop="content">
                        <el-input v-model="state.editForm.content" />
                    </el-form-item>
                    
                    <el-form-item label="题型" :label-width="formLabelWidth" prop="types__id">
                        <el-select v-model="state.editForm.types__id" class="m-2" placeholder="请选择题型">
                            <el-option
                            v-for="item in state.questType"
                            :key="item.id"
                            :label="item.typename"
                            :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="答案" :label-width="formLabelWidth" prop="answer">
                        <el-input v-model="state.editForm.answer" type="textarea" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible2 = false">取消</el-button>
                        <el-button type="primary" @click="handleEditQuest">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { Plus, Delete, EditPen } from '@element-plus/icons-vue'
import Service from "./api/index"
import { ElMessage, ElMessageBox  } from 'element-plus'

    // 表单验证
    const rules = {
        content: [
            { required: true, message: "请输入内容",  trigger: 'blur' },
            { min: 1, message: '内容长度不能小于1', trigger: 'blur' }
        ],
        title:[
             { required: true, message: "请输入题名",  trigger: 'blur' },
            { min: 1, message: '题名长度不能小于1', trigger: 'blur' }
        ],
        types__id:[
             { required: true, message: '此处为必选项',  trigger: 'blur' },
             
        ],
        answer: [
            { required: true, message: '请输入答案', trigger: 'blur' },
            { min: 1, message: '答案长度不能小于1', trigger: 'blur' }
        ],
        
    }

    const status = ref(true)

    const pageSize = ref(5)

    const currentPage = ref(1)

    const state = reactive({
        tableData: [],

        form: [],

        questType: [],

        editForm: [],

        deleteMore: [],
    })

    const questRef = ref()

    const dialogFormVisible = ref(false)

    const dialogFormVisible2 = ref(false)

    const shows = ref(false)

    const input = ref("")

    const inputType = ref("")

    const selectors = ref("")

    onMounted(() => {
        getQuestions()
    })

    const handleSizeChange = (val) => {
        pageSize.value = val
    }
    const handleCurrentChange = (val) => {
        currentPage.value = val
    }

    const handleFocus = () => {
        shows.value = true
    }

    const handleBlur = () =>{
        shows.value = false
    }

    // 获取所有试题
    const getQuestions = async() => {
        let res = await Service.getQuestions()
        console.log(res)
        if(res.code === 200){
            state.tableData = res.data.data_list
            state.questType = res.data.data_type
            ElMessage({
              type: 'success',
              message: "获取成功"
            })
        }
    }

    // 打开添加试题的对话框
    const handleAddUser = () => {
        dialogFormVisible.value = true
    }

    // 添加试题
    const handleAddQuest = () => {
        questRef.value.validate(async (vaild) => {
            if(vaild){
                console.log(state.form)
                let res = await Service.postQuestions({...state.form})
                if(res.code === 200){
                    ElMessage({
                        type: 'success',
                        message: "获取成功"
                    })
                    dialogFormVisible.value = false
                    state.form = []
                    getQuestions()
                }
            }
        })
    }

    // 删除试题
    const handleDelete = (i) => {
        ElMessageBox.confirm(
            '确定要删除此题嘛?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        .then(async() => {
            let res = await Service.deleteQuestions(i)
            console.log(res)
            if(res.code === 200){
                ElMessage({ 
                    type: 'success',
                    message: "删除成功",
                })
                getQuestions()
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        }) 
    }

    // 打开修改试题的对话框
    const handleEdit = (data) => {
        state.editForm = []
        state.editForm = data
        dialogFormVisible2.value = true
    }

    // 修改试题
    const handleEditQuest = async() => {
        let res = await Service.putQuestions(state.editForm)
        console.log(res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: "修改成功",
            })
            dialogFormVisible2.value = false
            getQuestions() 
            
        }
    }

    // 批量选择
    const handleSelectionChange = (val) => {
        let ids = []
        for(var i = 0; i < val.length; i++){
            ids.push(val[i].id)
        }
        state.deleteMore = [...ids]
    } 

    // 批量删除
    const handleMoreDel = () => {
        ElMessageBox.confirm(
            '确定要删除这些试题嘛?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        .then(async() => {
            let res = await Service.deleQuestions({...state.deleteMore})
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: "删除成功",
                })
                getQuestions()
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        }) 
    }

    // 添加类型
    const handleType = async() => {
        let obj = {
            typename: inputType.value
        }
        if(inputType.value == ""){
            alert("请输入题型")
        }else{
            let res = await Service.postQuestionType(obj)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: "添加成功",
                })
                inputType.value = ""
                getQuestions()
            }
        }   
        
    }

    // 
    const handleEditType =() =>{
        console.log()
    }

    // 模糊查询
    const inp = computed(() => {
        let ss = [];
        for(var i = 0; i < state.tableData.length; i++){
            ss.push({...state.tableData[i]})
        }
        
        if(input.value !== "" | selectors == ""){
            ss = ss.filter((item) => {
                return item.title.indexOf(input.value) > -1 | item.content.indexOf(input.value) > -1 
            })
        }else if(selectors !== "" | input.value == ""){
            ss = ss.filter((item) => {
                return item.types__typename.indexOf(selectors.value) > -1
            })
        }else if(selectors !== "" | input.value !== ""){
            ss = ss.filter((item) => {
                return item.title.indexOf(input.value) > -1 | item.content.indexOf(input.value) > -1 | item.types__typename.indexOf(selectors.value) > -1
            })
        }
        
        return ss
    })



</script>

<style scoped>
.header{
    display: flex;
    margin: 15px 0 20px 30px;
}
.tables{ 
    margin: 0 30px;
}
.table_inner{
    padding: 20px 70px;
    font-size: 20px;
    font-weight: 600;
}
.da{
    margin: 10px 30px;
    font-size: 16px;
}
.el-form-item{
    display: block;
    text-align: left;
    padding: 0 40px;
}
.selec{
    border: 1px gainsboro solid;
    width: 100%;
    height: 50px;
    border-radius: 3px;
}
.demo-pagination-block{
    align-items: center;
    margin: 20px;
}
.inputs{
    height: 34px;
    padding: 0, 32px 0 20px;
    width: 100%;
    padding: 0 5px;
}
.el-select-dropdown__wrap{
    height: 180px;
}
</style>
